<template>
  <a-card :loading="loading">
    <search-bar :searchItems="searchItems" @search="searchHandle" />
    <table-page
      :table-cols="tableCols"
      :table-datas="tableDatas"
      :operationBtns="operationBtns"
      @operationHandel="operationHandel"
      :selectOptionDatas="selectOptionDatas"
    />
    <pagination
      :total="params.total"
      :limit="params.limit"
      :page="params.page"
      @pagination="paginationHandel"
    />
  </a-card>
</template>
<script>
import SearchBar from "@/components/SearchBar";
import TablePage from "@/components/TablePage";
import Pagination from "@/components/Pagination";

export default {
  components: {
    SearchBar,
    TablePage,
    Pagination,
  },
  data() {
    return {
      loading: false,
      searchItems: [
        { key: "title", label: "标题" },
        { key: "context", label: "消息内容" },
      ],
      tableCols: [
        { title: "消息标题", dataIndex: "title", width: 200 },
        { title: "消息内容", dataIndex: "content" },
        { title: "外链", dataIndex: "link", width: 200 },
        { title: "备注", dataIndex: "remark" },
      ],
      operationBtns: [
        { key: "delete", label: "删除" },
      ],
      params: { total: 0, limit: 10, page: 0 },
      tableDatas: [],
      selectOptionDatas:{},
      formData: {},
      fromVisible: false,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.$store
        .dispatch("notice/queryList", this.params)
        .then((res) => {
          this.tableDatas = res.list;
          this.params.total = res.totalCount;
        });
    },
    searchHandle(params) {
      this.params = { ...this.params, ...params };
      this.initData();
    },
    operationHandel(row, event) {
      var vm = this;
      if (event === "delete") {
        vm.$confirm({
          title: "确定要删除此记录吗？",
          onOk() {
            vm.$store.dispatch("notice/deleteNotice", row.id).then(() => {
              vm.initData();
              vm.$message.success("删除成功！");
            });
          },
        });
      }
    },
    paginationHandel({ page, limit }) {
      this.params.page = page;
      this.params.limit = limit;
      this.initData();
    },
  },
};
</script>
<style scoped>
.ant-card {
  min-height: calc(100vh - 64px);
  margin: 24px 24px 0;
}
</style>